<template>
  <div ref="chart" style="width: 100%; height: 100%;"></div>
</template>

<script>
import * as echarts from 'echarts';
import { normaldistribution } from '@/api/workorder/cpkdata'

export default {
  name: 'NormalDistributionChart',
  props: {
    tempId: {
      // type: String,
      required: true,
    },
  },
  data() {
    return {
      chartInstance: null,
      cl: 5.1625,
      ucl: 5.2,
      lcl: 5.1,
      data: [],//[4.953708836393874, 0.06367867780503969], [4.9578846596659965, 0.07610011516534611], [4.962060482938119, 0.09061771993612464], [4.9662363062102415, 0.1075170864016521], [4.970412129482364, 0.12710960912491698], [4.9745879527544865, 0.1497324115796539], [4.978763776026609, 0.17574775876557605], [4.9829395992987315, 0.20554187371361174], [4.987115422570854, 0.23952307965716552], [4.991291245842977, 0.27811919428139154], [4.995467069115099, 0.32177411018823615], [4.999642892387222, 0.37094350678971644], [5.003818715659344, 0.42608965343882105], [5.007994538931467, 0.48767528179223407], [5.012170362203589, 0.5561565271096464], [5.016346185475712, 0.631974963223051], [5.020522008747834, 0.7155487838893698], [5.024697832019957, 0.8072632136365763], [5.028873655292079, 0.9074602633232982], [5.033049478564202, 1.016427978586735], [5.037225301836324, 1.1343893621354846], [5.041401125108447, 1.2614911823068407], [5.045576948380569, 1.3977929092102404], [5.049752771652692, 1.5432560448213946], [5.053928594924814, 1.6977341332674163], [5.058104418196937, 1.8609637509883077], [5.062280241469059, 2.032556782312309], [5.066456064741182, 2.211994283240558], [5.070631888013304, 2.398622224118113], [5.074807711285427, 2.5916493798656024], [5.078983534557549, 2.7901476043717923], [5.083159357829672, 2.9930546836752336], [5.087335181101794, 3.1991799112502157], [5.091511004373917, 3.407212469011107], [5.095686827646039, 3.6157326309004434], [5.099862650918162, 3.8232257338348155], [5.1040384741902844, 4.028098785374924], [5.108214297462407, 4.228699501050445], [5.1123901207345295, 4.423337489280859], [5.116565944006652, 4.610307230862459], [5.1207417672787745, 4.787912435610662], [5.124917590550897, 4.9544913034223885], [5.1290934138230195, 5.108442173012965], [5.133269237095142, 5.248249010832679], [5.137445060367265, 5.372506176724363], [5.141620883639387, 5.4799419028095135], [5.14579670691151, 5.569439938409918], [5.149972530183632, 5.640058846468977], [5.154148353455755, 5.6910484852822645], [5.158324176727877, 5.721863272147433], [5.1625, 5.732171901019958], [5.166675823272122, 5.721863272147442], [5.170851646544245, 5.691048485282282], [5.175027469816367, 5.640058846469002], [5.17920329308849, 5.5694399384099516], [5.183379116360612, 5.479941902809556], [5.187554939632735, 5.3725061767244116], [5.191730762904857, 5.248249010832735], [5.19590658617698, 5.108442173013028], [5.200082409449102, 4.954491303422457], [5.204258232721225, 4.7879124356107345], [5.208434055993347, 4.610307230862536], [5.21260987926547, 4.423337489280939], [5.216785702537592, 4.22869950105053], [5.220961525809715, 4.02809878537501], [5.225137349081837, 3.823225733834903], [5.22931317235396, 3.6157326309005327], [5.233488995626082, 3.4072124690111956], [5.237664818898205, 3.199179911250304], [5.241840642170327, 2.9930546836753202], [5.24601646544245, 2.790147604371878], [5.250192288714572, 2.5916493798656854], [5.254368111986695, 2.398622224118194], [5.2585439352588175, 2.2119942832406356], [5.26271975853094, 2.032556782312384], [5.2668955818030625, 1.860963750988379], [5.271071405075185, 1.6977341332674838], [5.2752472283473075, 1.5432560448214583], [5.27942305161943, 1.3977929092103003], [5.2835988748915526, 1.2614911823068966], [5.287774698163675, 1.1343893621355368], [5.291950521435798, 1.0164279785867831], [5.29612634470792, 0.9074602633233427], [5.300302167980043, 0.8072632136366171], [5.304477991252165, 0.7155487838894072], [5.308653814524288, 0.631974963223085], [5.31282963779641, 0.5561565271096767], [5.317005461068533, 0.4876752817922616], [5.321181284340655, 0.42608965343884564], [5.325357107612778, 0.37094350678973875], [5.3295329308849, 0.32177411018825586], [5.333708754157023, 0.2781191942814089], [5.337884577429145, 0.2395230796571809], [5.342060400701268, 0.20554187371362534], [5.34623622397339, 0.17574775876558785], [5.350412047245513, 0.14973241157966422], [5.354587870517635, 0.1271096091249259], [5.358763693789758, 0.10751708640165988], [5.36293951706188, 0.09061771993613124], [5.367115340334003, 0.07610011516535185], [5.371291163606125, 0.06367867780504455]
      line: []//4.953708836393874, 5.02330589092925, 5.092902945464625, 5.232097054535376, 5.301694109070751, 5.371291163606127, 5.1625000000000005
    };
  },
  mounted() {
    this.getData()
  },
  beforeDestroy() {
    if (this.chartInstance) {
      this.chartInstance.dispose();
    }
  },
  methods: {
    async getData(){
      const res = await normaldistribution(this.tempId);
      this.data = res.data.data[0]
      this.line = res.data.data[1]

      this.initChart();
    },
    initChart() {
      this.chartInstance = echarts.init(this.$refs.chart);
      const option = this.getOption();
      this.chartInstance.setOption(option);
      this.$emit('normalEvent', false);
    },
    getOption() {
      const xData = this.data.map(item => item[0]);
      const yData = this.data.map(item => item[1]);

      // 计算x轴和y轴的最小值和最大值
      let xMin = Math.min(...xData);
      let xMax = Math.max(...xData);
      const yMin = Math.min(...yData);
      const yMax = Math.max(...yData);


      if (this.line.length > 0) {
        const xMaxline = Math.max(...this.line);
        const xminline = Math.min(...this.line);

        if (xMaxline > xMax) {
          xMax = xMaxline;
        }
        if (xminline < xMin) {
          xMin = xminline;
        }
      }

      // 增加20%的范围
      const xMinAdjusted = parseFloat((xMin - 0.1 * (xMax - xMin)).toFixed(2));
      const xMaxAdjusted = parseFloat((xMax + 0.1 * (xMax - xMin)).toFixed(2));
      const yMinAdjusted = 0// parseFloat((yMin - 0.1 * (yMax - yMin)).toFixed(2));
      const yMaxAdjusted = parseFloat((yMax + 0.1 * (yMax - yMin)).toFixed(2));




      // 动态生成 markLine 数据
      const markLineData = this.line.map((value, index) => ({
        xAxis: value,
        label: {
          position: 'start', // 标签显示在竖线的底部
          formatter: index-3, // 显示自定义文字，可根据需要修改
        },
        lineStyle: {
          type: 'dashed', // 设置虚线
          color: '#808080', // 竖线颜色
          width: 1,  // 线宽
        },
      }));

      // 动态生成 markArea 数据，根据每两个竖线的区间生成区域
      const markAreaData = [];
      const colors = ['#fcdfd1', '#fafcd1', '#d1fcd4', '#d1fcd4', '#fafcd1', '#fcdfd1'];
      for (let i = 0; i < this.line.length - 1; i++) {
        markAreaData.push([
          {
            xAxis: this.line[i],
          },
          {
            xAxis: this.line[i+1],
            itemStyle: {
              color: colors[i]  // 设置不同颜色
            }
          }
        ]);
      }

      return {
        title: {
          text: '正态分布图',
        },
        tooltip: {
          trigger: 'none' // 隐藏鼠标悬停提示
        },
        xAxis: {
          type: 'value',
          name: '',
          min: xMinAdjusted,
          max: xMaxAdjusted,
          boundaryGap: false,
          // axisLabel: {
          //   show: false, // 隐藏X轴上的标签
          // },
          // axisTick: {
          //   show: false, // 隐藏X轴的刻度
          // },
          splitLine: { show: false } // 隐藏x轴网格线
        },
        yAxis: {
          type: 'value',
          name: '概率密度',
          min: yMinAdjusted,
          max: yMaxAdjusted,
          boundaryGap: false,
          splitLine: { show: false } // 隐藏y轴网格线
        },
        series: [
          {
            name: '平滑曲线',
            type: 'line',
            smooth: true, // 平滑曲线
            showSymbol: false, // 不显示数据点
            data: this.data,
            markLine: {
              label: { show: false },
              symbol: ['none', 'none'], // 隐藏标记点
              data: markLineData, // 动态生成的标线数组
            },
            // markArea: {
            //   data: markAreaData // 动态生成的区域颜色
            // }
          }
        ]
      };
    },
    getMarkAreaColor(index) {
      // 根据区间索引返回不同的颜色
      return colors[index];  // 循环使用颜色
    }
  }
};
</script>

<style scoped>
/* 你可以在这里添加样式 */
</style>
